<template>
  <view class="authentication">
    <view class="authentication-content">
      <view class="authentication-box">
        <view class="suthentication-portrait">
          <view class="portraitt-title">
            <text>身份证人像面</text>
          </view>
          <view class="portrait-uploading-image" @click="uploadingNationalEmblem(0)" v-if="!formData.frontImage">
            <view class="portrait-uploading">
              <view class="uploading-titles">
                <text>仅供本次审核使用</text>
              </view>
              <view class="uploading-bottom">
                <view class="uploading-images">
                  <image src="@/static/mine/uploading.svg" mode="" />
                </view>
                <view class="uploading-text">
                  <text>上传照片</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else @click="uploadingNationalEmblem(0)">
            <image :src="formData.frontImage" mode="" class="img" />
          </view>
        </view>
      </view>
      <view class="authentication-box">
        <view class="suthentication-portrait">
          <view class="portraitt-title">
            <text>身份证国徽面</text>
          </view>
          <view class="portrait-uploading-image" @click="uploadingNationalEmblem(1)" v-if="!formData.backImage">
            <view class="portrait-uploading">
              <view class="uploading-titles">
                <text>仅供本次审核使用</text>
              </view>
              <view class="uploading-bottom">
                <view class="uploading-images">
                  <image src="@/static/mine/uploading.svg" mode="" />
                </view>
                <view class="uploading-text">
                  <text>上传照片</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else @click="uploadingNationalEmblem(1)">
            <image :src="formData.backImage" mode="" class="img" />
          </view>
        </view>
      </view>
      <view class="authentication-box">
        <view class="suthentication-portrait">
          <view class="portraitt-title">
            <text>自拍人像</text>
          </view>
          <view class="portrait-uploading-image" @click="uploadingNationalEmblem(2)" v-if="!formData.faceImage">
            <view class="portrait-uploading">
              <view class="uploading-titles">
                <text>仅供本次审核使用</text>
              </view>
              <view class="uploading-bottom">
                <view class="uploading-images">
                  <image src="@/static/mine/uploading.svg" mode="" />
                </view>
                <view class="uploading-text">
                  <text>上传照片</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else @click="uploadingNationalEmblem(2)">
            <image :src="formData.faceImage" mode="" class="img" />
          </view>

        </view>
      </view>
    </view>
  </view>
  <view class="btns pseron-uploading">
    <view class="fixed-content">
      <Button @clickButton="carete" :loading="loading" loading-text="修改中" text="确认修改" />
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
import { BASE_URL } from '@/config/base'
import { updateUserInfo, getUserInfo } from "@/api/apiList";

const formData = reactive({
  faceImage: '', // 自拍人像
  frontImage: '', // 身份证人像面
  backImage: '', // 身份证国徽面
  userId: ''
})

const uploadingNationalEmblem = (classfiy) => {
  uni.chooseImage({
    success: (result) =>
      new Promise((resolve) => {
        console.log(result, 'result')
        try {
          uni.uploadFile({
            url: BASE_URL + "/prod-api/common/upload",
            name: "file",
            filePath: result.tempFilePaths[0],
            header: {
              // "content-type": "multipart/form-data",
              Authorization: "Bearer " + uni.getStorageSync("token"),
            },
            success: (result) =>
              new Promise(async (resolve) => {
                if (result?.statusCode <= 200 && result?.statusCode > 100) {
                  const imageUrl = JSON.parse(result.data).url
                  console.log(imageUrl);
                  uni.showToast({
                    title: "上传成功",
                    icon: "none",
                  });
                  if (classfiy == 0) {
                    formData.frontImage = imageUrl
                  } else if (classfiy == 1) {
                    formData.backImage = imageUrl
                  } else {
                    formData.faceImage = imageUrl
                  }
                } else {
                  uni.showToast({
                    title: "上传失败",
                    icon: "none",
                  });
                }
              }),
          });
        } catch (error) { }
      }),
  });
};

const getUserInfoChange = async () => {
  const response = await getUserInfo();
  if (response.code == 200) {
    formData.frontImage = response.data.frontImage
    formData.faceImage = response.data.faceImage
    formData.backImage = response.data.backImage
    formData.userId = response.data.userId
  }
};
getUserInfoChange();

const loading = ref(false);
const carete = async () => {
  loading.value = true;
  const response = await updateUserInfo(formData);
  if (response.code == 200) {
    uni.showToast({
      title: "修改成功",
      icon: "none",
    });
    setTimeout(() => {
      loading.value = false;
      uni.navigateBack()
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.img {
  width: 200px;
  height: 128px;
  border-radius: 8px;
}

.authentication {
  .authentication-content {
    .authentication-box {
      background: white;
      padding: 30rpx;
      padding-right: 80rpx;
      margin-top: 20rpx;

      .suthentication-portrait {
        display: flex;
        justify-content: space-between;

        .portraitt-title {
          text {
            font-family: PingFang SC Medium;
            font-size: 16px;
            color: #111111;
          }
        }

        .portrait-uploading-image {
          .portrait-uploading {
            width: 200px;
            height: 128px;
            border-radius: 8px;
            background: #f8f8f8;
            box-sizing: border-box;
            border: 1px solid #dddddd;
            display: flex;
            flex-direction: column;
            position: relative;

            text {
              text-align: center;
              font-family: PingFang SC Medium;
              font-size: 15px;
              color: #111111;

              &:nth-last-child(1) {
                padding-top: 24rpx;
                padding-left: 10rpx;
                text-align: left;
              }
            }

            image {
              width: 30rpx;
              height: 30rpx;
            }

            .uploading-titles {
              margin-top: 20rpx;
              margin-left: 10rpx;

              text {
                font-family: PingFang SC Medium;
                font-size: 11px;
                color: #999999;
              }
            }

            .uploading-bottom {
              position: absolute;
              bottom: 36rpx;
              width: 100%;

              .uploading-images,
              .uploading-text {
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
}

.pseron-uploading {
  position: fixed;
  bottom: 10rpx;
  display: flex;
  width: 100%;

  .fixed-content {
    flex: 1;
    margin: 34rpx;
  }
}
</style>
